<template>
  <div>
    <el-row>
      <el-col :span="24">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item><a href="/">商品管理</a></el-breadcrumb-item>
          <el-breadcrumb-item>商品分类</el-breadcrumb-item>
        </el-breadcrumb>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div>
          <el-button type="success" plain @click="showCategrory">添加用户</el-button>
        </div>
      </el-col>
    </el-row>
    <tree-grid
      :treeStructure="true"
      :columns="columns"
      :data-source="dataSource"
      @deleteCate="deleteCategory"
      @editCate="editCategory"
    >
    </tree-grid>
     <div class="page">
        <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="1"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
     </div>
     <!-- 添加级联 -->
      <el-dialog title="添加分类" :visible.sync="addDialogFormVisible">
        <el-form :model="addForm" :rules="rules" ref="addForm">
          <el-form-item label="分类名称" prop="cat_name">
            <el-input v-model="addForm.cat_name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="父级名称" >
            <el-cascader
              :options="options"
              :props="props"
              v-model="selectedOptions"
              @change="handleChange">
            </el-cascader>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="addCatSubmit">确 定</el-button>
        </div>
    </el-dialog>
  </div>

</template>
<script>
import TreeGrid from '@/components/TreeGrid/TreeGrid'
import {getCategrory,addCategrory} from '@/api'
export default {
  data(){
    return{
      dataSource: [],
      pagesize:10,
      pagenum:1,
      total:0,
      addDialogFormVisible:false,
      addForm:{
        cat_name:'',
        cat_pid:0,
        cat_level:0,
      },
      rules:{
        catname: [
            { required: true, message: '请输入用户名', trigger: 'blur' }
          ],
      },
      options:[],
      selectedOptions:[],
      props:{
        value:'cat_id',
        label:'cat_name'
      },
      columns: [{
      text: '分类名称',
      dataIndex: 'cat_name',
      width: ''
    }, {
      text: '是否有效',
      dataIndex: 'cat_deleted',
      width: ''
    }, {
      text: '排序',
      dataIndex: 'cat_level',
      width: ''
    }]
    }
  },
   created(){
    this.initList()
  },
  methods: {
  deleteCategory (cid) {
  },
  editCategory (cid) {
  },
   handleChange(value) {
    },
   handleSizeChange(val) {
      this.pagesize=val
      this.initList()
    },
    handleCurrentChange(val) {
      this.pagenum=val
      this.initList()
    },
    initList(){
      let params={params:{pagesize:this.pagesize,pagenum:this.pagenum,type:"3"}}
      getCategrory(params).then(res=>{
        if(res.meta.status===200){
          this.dataSource=res.data.result
          this.total=res.data.total
        }
      })

    },
    showCategrory(){
      this.addDialogFormVisible=true
      getCategrory({type:"2"}).then(res=>{
        if(res.meta.status===200){
          this.options=res.data
        }
      })
    },
    //添加分类
    addCatSubmit(){
      this.$refs.addForm.validate(bool=>{
        if(bool){
          if(this.selectedOptions.length===0){
            this.addForm.cat_pid=0
            this.addForm.cat_level=0
          }else if(this.selectedOptions.length===1){
            this.addForm.cat_pid=this.selectedOptions[0]
            this.addForm.cat_level=1
          }else{
             this.addForm.cat_pid=this.selectedOptions[1]
            this.addForm.cat_level=2
          }
        }
        addCategrory(this.addForm).then(res=>{
          if(res.meta.status===201){
            this.addDialogFormVisible=false
            //如果当前是第一页 就让跳转到最后一页
            if(this.pagenum===1){
              this.pagenum=Math.ceil(this.total/this.pagesize)
            }
             this.initList()
              this.$message({
              type:"success",
              message:"添加成功"
            })
          }
        })
      })
    }
},
  components:{
    TreeGrid
  },

}
</script>
<style scoped>

</style>



